<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
      <button id="now">获取实时天气</button>
      <hr>
      <h1>城市天气：</h1>
      <div id="showWeather"></div>
      <hr>
      <button id="future">获取预报天气</button>
</body>
</html>
<script src="./lib/jquery-3.1.0.min.js"></script>
<script>
 
   $("#now").click(()=>{
        $.ajax({
            type:"get",
            url:"https://restapi.amap.com/v3/weather/weatherInfo",
            data:{
                key: "29b3db8b005448bd6f6c6fbdec2f16f5",
                city:"成都"
            },
            dataType:"jsonp",
            success:(data)=>{
              console.log(data);
              //实时天气
              let temperature =data.lives[0].temperature;
              //报告时间
              let reporttime =data.lives[0].reporttime;
              $("#showWeather").html(`实时温度${temperature}°C,更新时间为：${reporttime}`)
            }
        })
   })

    //未来天气
    $("#future").click(()=>{
        $.ajax({
            type:"get",
            url:"https://restapi.amap.com/v3/weather/weatherInfo",
            data:{
                key: "29b3db8b005448bd6f6c6fbdec2f16f5",
                city:"成都",
                extensions:"all",
                output:"json"
            },
            dataType:"jsonp",
            success:(data)=>{
              console.log(data);
            
            }
        })
    })

</script>